<template>
    <view :catchtouchmove='stopPageScroll'>
        <view class="quote-mask" @tap="close"></view>
        <view class="quote-popup quote-popup-middle ">
            <view class="quote-top-closebox">
                <view class="quote-top-close-btn" @tap="close">
                    <image src="../../static/ibs/img_comm_close.png" mode=""></image>
                </view>
            </view>
            <view class="quote-box">
                <view class="quote-top-text">
                    请提供您对该产品的报价
                </view>
                <view class="quote-top-input">
                    <input type="text" v-model="data.price" value="" @blur="checkInput"/>
                    <text>RMB/KG</text>
                </view>
            </view>
            <view class="quote-box">
                <view class="quote-top-text">
                    请提供您的产品的规格细节等描述
                </view>
                <view class="quote-top-input">
                    <textarea value="" v-model="data.remark" placeholder="选填" placeholder-class="input-placeholder"/>
                </view>
            </view>
            <wx-form-id :saveData="saveQuote" :getFormId="saveFormId" :btnClass="btnClass"
                        :btnSubmitClass="btnSubmitClass" btnName="提交报价"></wx-form-id>
        </view>


    </view>
</template>

<script>
    import validate from "@/common/graceChecker.js"
    import api from '@/common/api.js';   //请求API方法
    import wxFormId from '@/components/wxFromId.vue';
    export default {
        components: {
            wxFormId
        },
        props: ['id', 'remoteUrl'],
        data() {
            return {
                data: {
                    demandId: this.id,
                    price: null,
                    remark: null

                },
                btnClass: ['quote-btn-box'],
                btnSubmitClass: ['quote-btn-submit-box'],
				canGetformId:false
            };
        },
        methods: {
            close() {
                this.$emit('closeInfo', 'quoteBox');
            },

            saveFormId(e) {
                let that = this;
				that.commonSaveFormId(e)//保存表单FormId
// 				setTimeout(function(){
// 					if(that.canGetformId){
// 						
// 					}
// 				},500)
            },
            //保存报价
            saveQuote() {
                var that = this;
                let validate = that.checkData();
                let checkInputVal = that.checkInput();
				that.canGetformId = false;
                if (!validate || !checkInputVal) {
                    return;
                }
				that.canGetformId = true;
                var params = that.data;
                api.httpRequest(that.remoteUrl, params, "post",true).then((res) => {
                    if (res.code == 200) {
                        //获取成功
                        uni.showToast({
                            icon: "none",
                            title: "报价成功!"
                        });
                        that.$parent.isShowQuoteBox = false;   //成功就关闭窗口
                        that.$parent.getData();   //成功就刷新数据
                    }
                });
            },
            //提交检查输入
            checkData() {
                if (this.data.price == '' || this.data.price == undefined) {
                    uni.showToast({
                        icon: 'none',
                        title: '价格不能为空'
                    })
                    return false;
                }
                return true;
            },
            //输入检验
            checkInput() {
			   var res= validate.checkPrice(null, this.data.price);
				if (res==true) {
					 return true;
				}else{
					 uni.showToast({
						icon: 'none',
						title: res
					})
					return false;
				}
            },

        }
    }
</script>
<style>
    .quote-mask {
        position: fixed;
        z-index: 998;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .5);
    }

    .quote-popup {
        position: absolute;
        z-index: 999;
        background-color: #ffffff;
        box-shadow: 0 0 30upx rgba(0, 0, 0, .1);
    }

    .quote-popup-middle {
        width: 600upx;
        height: 620upx;
        border-radius: 8upx;
        top: 50%;
        left: 50%;
        position: fixed;
        overflow: hidden;
        transform: translate(-50%, -50%);
    }

    .quote-top-closebox {
        height: 56upx;
        width: 100%;
    }

    .quote-top-close-btn {
        padding-right: 20upx;
        padding-top: 20upx;
        display: flex;
        justify-content: flex-end;
    }

    .quote-top-close-btn image {
        width: 36upx;
        height: 36upx;
    }

    .quote-box {
        padding-left: 30upx;
        padding-bottom: 40upx;
    }

    .quote-top-input {
        font-size: 28upx;
        color: #1A1A1A;
        display: flex;
        justify-content: flex-start;
        width: 540upx;
        align-items: center;
        margin-top: 20upx;
    }

    .quote-top-input input {
        font-size: 28upx;
        color: #1A1A1A;
        padding-left: 20upx;
    }

    .quote-top-input textarea {
        height: 140upx;
        border: #E5E5E5 1upx solid;
        border-radius: 8upx;
        font-size: 28upx;
        padding-left: 20upx;
	    padding-top: 20upx;
    }

    .quote-top-text {
        font-size: 28upx;
        color: #1A1A1A;
    }

    .quote-top-input text {
        padding-left: 20upx;
    }

    .quote-top-input input {
        border: #E5E5E5 1upx solid;
        border-radius: 8upx;
        font-size: 28upx;
        height: 68upx;
        line-height: 68upx;
        width: 100%;
    }

    .quote-btn-box {
        padding-top: 20upx;
        position: fixed;
        left: 0;
        right: 0;
    }

    .quote-btn-submit-box button {
        width: 460upx;
        background: #077131;
        color: #FFFFFF;
        font-size: 34upx;
        height: 88upx;
        line-height: 88upx;
        border-radius: 44upx;
    }

    .input-placeholder {
        font-size: 28upx;
        color: #B2B2B2;
    }


</style>
